<template>
  <router-view />
  <!-- 移动端调试器（仅在移动端显示） -->
  <MobileDebugger v-if="isMobileDevice()" />
</template>

<script setup>
import { onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
import { showNotify } from 'vant'
import { useUserStore } from '@/stores/user'
import websocketManager from '@/utils/websocket'
import { getUnreadCount } from '@/api'
import MobileDebugger from '@/components/MobileDebugger.vue'

const router = useRouter()
const userStore = useUserStore()

// 判断是否为移动端的函数（直接检查窗口宽度，不依赖响应式）
const isMobileDevice = () => {
  return window.innerWidth < 768
}

// WebSocket 消息处理器
const handleWebSocketMessage = (notification) => {
  console.log('收到 WebSocket 消息', notification)
  console.log('当前窗口宽度:', window.innerWidth)
  console.log('是否为移动端:', isMobileDevice())

  // 根据设备类型显示不同的通知
  if (isMobileDevice()) {
    // 移动端：使用 Vant Notify
    console.log('使用 Vant Notify 显示通知')
    showNotify({
      type: getVantNotifyType(notification.type),
      message: `${notification.title || '新消息'}\n${notification.content || ''}`,
      duration: 5000,
      onClick: () => {
        handleNotificationClick(notification)
      }
    })
  } else {
    // PC端：使用 Element Plus Notification
    console.log('使用 Element Plus Notification 显示通知')
    const notificationInstance = ElNotification({
      title: notification.title || '新消息',
      message: notification.content || '',
      type: getNotificationType(notification.type),
      duration: 5000,
      position: 'top-right',
      onClick: () => {
        // 点击通知跳转到相关页面
        handleNotificationClick(notification)
        notificationInstance.close()
      }
    })
  }

  // 更新未读数量
  updateUnreadCount()
}

// 根据通知类型返回 Element Plus 通知类型
const getNotificationType = (type) => {
  const typeMap = {
    'BILL_APPROVAL': 'warning',
    'BALANCE_REQUEST': 'warning',
    'TREASURY_CHANGE': 'info',
    'BILL_APPROVAL_RESULT': 'success',
    'BALANCE_APPROVAL_RESULT': 'success',
    'ANNIVERSARY_REMINDER': 'success',
    'DIARY_COMMENT': 'info',
    'NOTE_RECEIVED': 'success'
  }
  return typeMap[type] || 'info'
}

// 根据通知类型返回 Vant Notify 类型
const getVantNotifyType = (type) => {
  const typeMap = {
    'BILL_APPROVAL': 'warning',
    'BALANCE_REQUEST': 'warning',
    'TREASURY_CHANGE': 'primary',
    'BILL_APPROVAL_RESULT': 'success',
    'BALANCE_APPROVAL_RESULT': 'success',
    'ANNIVERSARY_REMINDER': 'success',
    'DIARY_COMMENT': 'primary',
    'NOTE_RECEIVED': 'success'
  }
  return typeMap[type] || 'primary'
}

// 处理通知点击事件
const handleNotificationClick = (notification) => {
  const type = notification.type
  const relatedId = notification.relatedId

  switch (type) {
    case 'BILL_APPROVAL':
      // 跳转到待审批账单页面
      router.push('/bill/pending')
      break
    case 'BALANCE_REQUEST':
      // 跳转到余额管理页面
      router.push('/balance')
      break
    case 'TREASURY_CHANGE':
      // 跳转到金库页面
      router.push('/treasury')
      break
    case 'BILL_APPROVAL_RESULT':
      // 跳转到账单详情页面
      if (relatedId) {
        router.push(`/bill/detail/${relatedId}`)
      }
      break
    case 'BALANCE_APPROVAL_RESULT':
      // 跳转到余额管理页面
      router.push('/balance')
      break
    case 'ANNIVERSARY_REMINDER':
      // 跳转到纪念日页面（待开发）
      // router.push('/anniversary')
      break
    case 'DIARY_COMMENT':
      // 跳转到日记详情页面（待开发）
      // router.push(`/diary/detail/${relatedId}`)
      break
    case 'NOTE_RECEIVED':
      // 跳转到小纸条页面（待开发）
      // router.push('/notes')
      break
    default:
      // 跳转到消息中心
      router.push('/notification')
  }
}

// 更新未读消息数量
const updateUnreadCount = async () => {
  try {
    const res = await getUnreadCount()
    if (res.code === 200) {
      userStore.setUnreadCount(res.data)
    }
  } catch (error) {
    console.error('获取未读消息数量失败', error)
  }
}

// 连接 WebSocket 的函数
const connectWebSocket = (token) => {
  console.log('🔌 开始连接 WebSocket...')
  websocketManager.connect(token)
    .then(() => {
      console.log('✅ WebSocket 连接成功，准备添加消息处理器')
      // 添加消息处理器
      websocketManager.onMessage(handleWebSocketMessage)
      console.log('✅ 消息处理器已添加')
      // 初始化未读数量
      updateUnreadCount()
    })
    .catch(error => {
      console.error('❌ WebSocket 连接失败', error)
    })
}

// 监听 token 变化，自动连接/断开 WebSocket
watch(() => userStore.token, (newToken, oldToken) => {
  console.log('🔄 Token 变化:', {
    旧Token: oldToken ? '存在' : '不存在',
    新Token: newToken ? '存在' : '不存在'
  })

  if (newToken && !oldToken) {
    // 用户登录，连接 WebSocket
    console.log('👤 用户登录，连接 WebSocket')
    connectWebSocket(newToken)
  } else if (!newToken && oldToken) {
    // 用户登出，断开 WebSocket
    console.log('👋 用户登出，断开 WebSocket')
    websocketManager.offMessage(handleWebSocketMessage)
    websocketManager.disconnect()
  } else if (newToken && oldToken && newToken !== oldToken) {
    // Token 更新（重新登录），重新连接 WebSocket
    console.log('🔄 Token 更新，重新连接 WebSocket')
    websocketManager.offMessage(handleWebSocketMessage)
    websocketManager.disconnect()
    connectWebSocket(newToken)
  }
})

// 组件挂载时连接 WebSocket
onMounted(() => {
  console.log('🚀 App.vue onMounted 触发')
  console.log('📝 用户 Token:', userStore.token ? '存在' : '不存在')

  // 如果用户已登录，连接 WebSocket
  if (userStore.token) {
    connectWebSocket(userStore.token)
  } else {
    console.log('⚠️ 用户未登录，跳过 WebSocket 连接')
  }
})

// 组件卸载时断开 WebSocket
onUnmounted(() => {
  websocketManager.offMessage(handleWebSocketMessage)
  websocketManager.disconnect()
})
</script>

<style>
/* 全局样式已在 global.css 中定义 */
</style>
